<template>
  <view>
    <uni-section title="状态 :" type="line">
      <view class="item">
        {{statusText}}
      </view>
    </uni-section>
    <uni-section title="申请人 :" type="line">
      <view class="item">
        {{userInfo.username}}
      </view>
    </uni-section>
    <uni-section v-if="id == 1" title="请假类型 :" type="line">
      <view class="item">
        {{rangeMap[formData.type]}}
      </view>
    </uni-section>
    
    <uni-section title="补卡日期:" v-if='formData.replacementDate' type="line">
      <view class="item">
        {{formData.replacementDate}}
      </view>
    </uni-section>

    <uni-section title="开始时间:" v-if='formData.startTime' type="line">
      <view class="item">
        {{formData.startTime}}
      </view>
    </uni-section>
    <uni-section title="结束时间:" v-if='formData.endTime' type="line">
      <view class="item">
        {{formData.endTime}}
      </view>
    </uni-section>
    <uni-section title="实际加班结束时间:" v-if='formData.auditType == 3' type="line">
      <view class="item">
        {{formData.realOvertime || '--'}}
      </view>
    </uni-section>
    
    <uni-section title="吃饭开始时间:" v-if='formData.eatStartTime' type="line">
      <view class="item">
        {{formData.eatStartTime}}
      </view>
    </uni-section>
    <uni-section title="吃饭结束时间:" v-if='formData.eatEndTime' type="line">
      <view class="item">
        {{formData.eatEndTime}}
      </view>
    </uni-section>
    <uni-section title="吃饭时长:" v-if='formData.eatDuration' type="line">
      <view class="item">
        {{formData.eatDuration}}小时
      </view>
    </uni-section>
    <uni-section title="加班时长:" v-if='formData.duration' type="line">
      <view class="item">
        {{formData.duration}}小时
      </view>
    </uni-section>

    <uni-section title="事由:" type="line">
      <view class="item">
        {{formData.causeOfMatter || '无'}}
      </view>
    </uni-section>

    <uni-section title="附件 :" type="line">
      <view class="item">
        <uni-file-picker v-if='fileList.length' :value="fileList" readonly fileMediatype="image" :del-icon="false"
          :image-styles="imageStyles" />
        <text v-else>无</text>
      </view>
    </uni-section>
    
    <uni-section title="组长审批意见:" v-if='formData.leadAuditOpinion' type="line">
      <view class="item">
        {{formData.leadAuditOpinion}}
      </view>
    </uni-section>
    <uni-section title="管理员审批意见:" v-if='formData.adminAuditOpinion' type="line">
      <view class="item">
        {{formData.adminAuditOpinion}}
      </view>
    </uni-section>

    <uni-section title="审批流程" type="line">
      <view class="item">
        <uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
      </view>
    </uni-section>

    <button type="default" @click="cancel" v-if="formData.auditStatus == 1 || formData.auditStatus == 3" class="submitBtn">撤销</button>
  </view>
</template>

<script>
  import {
    LEAVE_ENUM,
    STATUS_ENUM
  } from '../../constants/constants'
import { messageSuccess } from '../../utils'
  import {
    getAuditDetail,
    getInfo,
    getStuffList,
    updateAuditInfo
  } from '../../utils/api'
  export default {
    computed: {
      statusText() {
        return STATUS_ENUM[this.formData.auditStatus] || ''
      },
      fileList() {
        const {
          attaUrl
        } = this.formData
        if (!attaUrl) {
          return []
        }
        return [{
          url: attaUrl
        }]
      },

      stuffMap() {
        return this.stuffList.reduce((prev, next) => {
          return {
            ...prev,
            [next.userId]: next
          }
        }, {})
      },
      list() {
        const {
          auditStatus,
          auditAdminUserId,
          auditLeadUserId,
          adminAuditOpinion
        } = this.formData
   
        let leaderDesc = ''
        let adminDesc = ''

        switch (auditStatus) {
          case 5:
            leaderDesc = '已通过'
            adminDesc = '已通过'
            this.active = 2
            break;
          case 4:
            leaderDesc = '已通过'
            adminDesc = '驳回'
            this.active = 2
            break;
          case 3:
            leaderDesc = '已通过'
            adminDesc = '待审核'
            this.active = 1
            break;
          case 2:
            leaderDesc = '驳回'
            adminDesc = '待审核'
            this.active = 1
            break;
          case 1:
            leaderDesc = '待审核'
            adminDesc = '待审核'
            this.active = 0
            break;
          default:
            break;
        }
        return [{
          title: '组长 - ' + (this.stuffMap[auditLeadUserId]?.username || '无'),
          desc: leaderDesc
        }, {
          title: '管理员 - ' + (this.stuffMap[auditAdminUserId]?.username || "无"),
          desc: adminDesc 
        }]
      }
    },
    data() {
      return {
        id: '',
        userInfo: {},
        stuffList: [],
        active: 0,
        formData: {

        },
        rangeMap: LEAVE_ENUM,
        imageStyles: {
          width: 98,
          height: 98,
          border: {
            width: 2,
            style: 'dashed',
            radius: '2px'
          }
        },
      }
    },
    onLoad({
      id
    }) {
      this.id = id
      this.getUserInfo()
      this.getStuffList()
      this.getDetail()
    },
    methods: {
      async getUserInfo() {
        this.userInfo = await getInfo()
      },
      async getDetail() {
        this.formData = await getAuditDetail({
          auditId: this.id
        })
      },
      async getStuffList() {
        this.stuffList = await getStuffList()
      },
      async cancel() {
        await updateAuditInfo({auditStatus: 0, id: this.id})
        messageSuccess('撤销成功', () => {
          uni.navigateBack()
        })
      }
    }
  }
</script>

<style>
  .item {
    padding: 0 40rpx;
  }
  
  .submitBtn {
    margin: 72rpx 20rpx;
  }
</style>